<script setup lang='ts'>
// 测试代码
// src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
import { ref } from 'vue'

// import { useIntersectionObserver } from '@vueuse/core'
// 1.0 得到元素的 ref 对象
// const target = ref<HTMLImageElement | null>(null)
// 2.0 使用方法来监听元素是否进入可视区
// const { stop }  = useIntersectionObserver(target, ([{ isIntersecting }]) => {
//   // e => []
//   //  e[0].isIntersecting：boolean 值，用来表示元素是否在可视区中
//   if (isIntersecting) {
//     console.log('在可视区')
//     // 加载图片：直接给图片设置一个属性 src
//     target.value!.src = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg'

//     stop()
//   } else {
//     console.log('不在可视区')
//   }
// })
//-----------------------------------------------
// 功能二：使用自定义指令完成图片的懒加载
// const imgUrl = ref( 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg')
//功能三: 使用 vue3 动画
const show = ref(true)
</script>
<template>
  <h1>测试页面</h1>
  <h3>1.0 实现图片的懒加载</h3>
  <!-- 思路：默认情况下不显示图片，等到图片进入可视区域时，才加载图片 -->
  <!-- <div class="box">页面区域</div>
  <img ref="target" /> -->
  <h3>2.0 自定义指令实现图片懒加载</h3>
<!-- <div class="box">页面区域</div>
  <img v-lazy= "imgUrl" /> -->
  <h3>3.0 使用 vue3 动画</h3>
<button @click="show = !show">点击切换元素状态</button>
<transition name="my">
  <div class="mybox" v-if="show"></div>
</transition>
</template>
<style scoped lang='less'>
.box {
  height: 1000px;
  background-color: #ccc;
}
.mybox {
  width: 100px;
  height: 20px;
  background-color: skyblue;
}
.my-leave-from, .my-enter-to {
  transform: translateX(0px);
}
.my-leave-active, .my-enter-active {
  transition: all 2s;
}
.my-leave-to, .my-enter-from {
  transform: translateX(1000px);
}
</style>